<script setup lang="ts">
import { useArticleStore } from "@/stores/articleStore";

//获取文章的store对象
const articleStore = useArticleStore();
//获取路由信息
const route = useRoute();
//发送获取文章详情的请求
articleStore.getArticle(route.params.id as string);
</script>
<template>
  <header>
    <div>
      <div class="title">
        <h1>染柒</h1>
        <p>关于染柒的个人博客</p>
      </div>
      <div class="banner" v-if="articleStore.article.status === 'success'">
        <img :src="articleStore.article.result.cover" alt="" />
      </div>
    </div>
  </header>
</template>
<style scoped lang="scss">
header {
  width: 100%;
  height: 700px;
  position: relative;
}
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: var(--el-bg-color-overlay);
  h1 {
    font-style: 30px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 10px;
  }
  p {
    font-style: 18px;
    text-align: center;
  }
}
.banner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: 100%;
    width: 1920px;
    height: 1080px;
  }
}
</style>
